<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>game1</title>
    <style media="screen">
        canvas {
            border: 1px black solid;
        }

    </style>
</head>

<body>
    <canvas id="id-canvas" width="500" height="600"></canvas>
    <script type="text/javascript" >
        var log = console.log.bind(console)
        var canvas = document.querySelector('#id-canvas')
        var context = canvas.getContext('2d')

        var x = 100
        var y = 200
        var speed = 5
        var img = new Image
        img.src = 'paddle.png'
        log(img)

        img.onload = function()
        {
            context.drawImage(img, x, y)
        }

        var leftDown = false
        var rightDown = false


        //events
        window.addEventListener('keydown',function(event){
            //log(event)
            log('keydown')
            var key = event.key
            if(key == 'a')
            {
                leftDown = true
            }
            else if( key == 'd')
            {
                rightDown = true
            }
        })

        window.addEventListener('keyup',function(event){
            //log(event)
            log('keyup')
            var key = event.key
            if(key == 'a')
            {
                leftDown = false
            }
            else if( key == 'd')
            {
                rightDown = false
            }
        })

        // time
        setInterval(function(){
            //update x y

            if(leftDown)
            {
                x-=speed
            }
            else if (rightDown) {
                x+=speed
            }

            //draw
            context.clearRect(0, 0, canvas.width, canvas.height)
            context.drawImage(img, x, y)
        }, 1000/30)
    </script>
</body>


</html>


    
